<template>
  <div v-if="show" class="card-padding">
    <el-card style="width: 100%">
      <template #header>
        <el-row>
          <el-col :span="18"
            ><h5 style="font-size: large">
              欢迎，{{ userInfo.nickname }}
            </h5></el-col
          >
          <el-col :span="6"
            ><h5 style="font-size: large">
              当前时间 {{ currentTime }}
            </h5></el-col
          >
        </el-row>
      </template>
      <el-row>
        <el-col :span="6">
          <DoctorHeadCard
            title="项目总数"
            :number="dashBoardData?.projectNumber"
            card-color="deepskyblue"
            img-url="/projects.png"
          />
        </el-col>
        <el-col :span="6">
          <DoctorHeadCard
            title="有待检项目人数"
            :number="dashBoardData?.unFinish"
            card-color="orange"
            img-url="/looking.png"
          />
        </el-col>
        <el-col :span="6">
          <DoctorHeadCard
            title="有正在排队人数"
            :number="dashBoardData?.queueing"
            card-color="seagreen"
            img-url="/queue.png"
          />
        </el-col>
        <el-col :span="6">
          <DoctorHeadCard
            title="有完成项目人数"
            :number="dashBoardData?.finished"
            img-url="/working.png"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { IDashBoard } from "@/api/queue/types";
import dayjs from "dayjs";
import { getDashboardData } from "@/api/queue";
import DoctorHeadCard from "@/views/dashboard/doctor/doctor-head-card.vue";

let userInfo = useUserStore().user;
const dashBoardData = ref<IDashBoard>();
const currentTime = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
const intervalId = ref();
const loading = ref(false);
const show = ref(false);

const queryDashBoardData = () => {
  loading.value = true;
  getDashboardData()
    .then((res) => {
      dashBoardData.value = res.data;
    })
    .finally(() => {
      show.value = true;
      loading.value = false;
    });
};
onMounted(() => {
  queryDashBoardData();
  intervalId.value = setInterval(() => {
    currentTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }, 1000);
});
onUnmounted(() => {
  clearInterval(intervalId.value);
});
</script>

<style scoped lang="scss">
.card-padding {
  padding: 1vh;
}
</style>
